<template>
  <!-- *

  弹出框
  例：
   <qm-dialog v-model="show5" confirmButtonColor="blue">
      <template >
        <h4>已添加到桌面</h4>
        <div class="mydiv">
          说明当前状态、提示用户解决方案最好不要超过两行。
        </div>
        <div class="custom">自定义组件区</div>
      </template>
      </qm-dialog>
属性：
v-model：是否显示弹窗；
title：标题；
message：文本内容，支持通过 \n 换行，支持渲染HTML
show-confirm-button：是否展示确认按钮；
show-cancel-button：是否展示取消按钮；
插槽 ：
default    自定义内容
title    自定义标题

  使用教程请查看vant-dialog文档：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/dialog
* -->

  <van-dialog v-bind="$attrs" v-on="$listeners">
    <template v-for="(index, name) in $slots" :slot="name">
      <slot :name="name" />
    </template>
  </van-dialog>
</template>

<script>
import { Dialog, Overlay } from "vant";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="less">

// 文字居中

  // width: 252px;
  /deep/.van-dialog__footer {
    // border-top: 1px #E9ECF0 solid;
    height: 48px;
  }
  /deep/ .van-dialog__header{
    color: #0F1826;
    font-size: 18px;
    font-weight: 500;
  }


.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

</style>
